<template>
  <div>
    <!-- <h1>{{project}}</h1> -->
    <!-- 头部开始 -->
    <div class="top_title" id="top1">
      <span>阶段：</span>
      <span id="p_type">{{ project[0].name }}</span>
      <span>&emsp;</span>
      <span>资助标准：</span>
      <span id="p_money">{{ project[0].money }}元</span>
      <span>/年</span>
    </div>
    <!-- 头部结束，内容开始 -->
    <div class="content_box">
      <!-- 学生基本信息开始 -->
      <div class="one_box xwzx_box" id="one_box">
        <div class="one_row">
          <div class="row_left c_row">
            <div class="left_box">学生编号</div>
            <div class="right_box stidss" id="stidss">
              {{ project[1].recipientId }}
            </div>
          </div>
          <div class="row_right c_row">
            <div class="left_box">姓名</div>
            <div class="right_box" id="hjszd">{{ project[1].name }}</div>
          </div>
        </div>
        <div class="one_row">
          <div class="row_left c_row">
            <div class="left_box">出生日期</div>
            <div class="right_box" id="xb">{{ project[1].birthday }}</div>
          </div>
          <div class="row_right c_row">
            <div class="left_box">年龄</div>
            <div class="right_box" id="csrq">{{ project[1].age }}</div>
          </div>
        </div>
        <div class="one_row">
          <div class="row_left c_row">
            <div class="left_box">政治面貌</div>
            <div class="right_box" id="zzmm">
              {{ project[1].politicalOutlook }}
            </div>
          </div>
          <div class="row_right c_row">
            <div class="left_box">收款账户</div>
            <div class="right_box" id="mz">{{ project[1].accountNumber }}</div>
          </div>
        </div>
        <div class="one_row">
          <div class="row_left c_row">
            <div class="left_box">学段</div>
            <div class="right_box" id="nj">
              {{ project[1].learningSection }}
            </div>
          </div>
          <div class="row_right c_row">
            <div class="left_box">就读学校</div>
            <div class="right_box" id="xxmc">{{ project[1].school }}</div>
          </div>
        </div>
        <div class="one_row">
          <div class="row_left c_row">
            <div class="left_box">目标金额</div>
            <div class="right_box" id="xxyb">{{ project[1].targetMoney }}</div>
          </div>
          <div class="row_right c_row">
            <div class="left_box">收货地址</div>
            <div class="right_box" id="xxdz">
              {{ project[1].receivingAddress }}
            </div>
          </div>
        </div>
        <div class="one_row">
          <div class="row_left c_row">
            <div class="left_box">
              <!-- 申请时间 -->
              筹集金额
            </div>
            <div class="right_box" id="lrsj">{{ project[1].totalMoney }}</div>
          </div>
          <div class="row_right c_row">
            <div class=""></div>
            <div class=""></div>
          </div>
        </div>
      </div>
      <!-- 学生基本信息结束 -->
      <div class="box">
        <el-collapse class="collapse_box" accordion>
          <el-collapse-item title="学生成绩">
            <!-- 学生成绩开始 -->
            <student-score :scoreList="project[2]"></student-score>
          </el-collapse-item>
          <!-- 学生成绩结束 -->

          <!-- 学生荣誉开始 -->
          <el-collapse-item title="学生荣誉">
            <student-award :awardList="project[4]"></student-award>
          </el-collapse-item>
          <!-- 学生荣誉结束 -->

          <!-- 推荐人开始 -->
          <!-- <el-collapse-item title="推荐人">
            <div
              class="three_box xwzx_box"
              id="three_box"
              style="display: block"
            >
              <div class="biaoxian_title">
                <h3>推荐人</h3>
              </div>
              <table
                class="jtbigtable"
                border="0"
                cellspacing="0"
                cellpadding="0"
              >
                <tbody>
                  <tr>
                    <td class="jtlvsetd" style="text-align: center">推荐人</td>
                    <td class="boo" id="tjr">李明学</td>
                  </tr>
                  <tr>
                    <td class="jtlvsetd" style="text-align: center">电话</td>
                    <td class="boo2" id="dh">18293718315</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-collapse-item> -->
          <!-- 推荐人结束 -->
          <!-- 其他情况开始 -->
          <el-collapse-item title="其他情况">
            <div class="four_box xwzx_box" id="four_box" style="display: block">
              <div class="jiating_title">
                <h3>其它情况说明</h3>
              </div>
              <div class="g20"></div>
              <div>
                <table
                  class="jtbigtable"
                  width="0"
                  border="0"
                  cellspacing="0"
                  cellpadding="0"
                >
                  <tbody>
                    <tr>
                      <td class="jtjusetd">
                        照片/编号{{ project[3].othersId }}
                      </td>
                      <td
                        style="
                          border-right: none;
                          border-bottom: 1px #cdcec0 solid;
                          text-align: center;
                          background-color: #fee7cd;
                        "
                      >
                        文字叙述
                      </td>
                    </tr>
                    <tr>
                      <td class="jtjusetd" style="background-color: white">
                        <el-empty
                          v-if="!project[3]"
                          :image-size="50"
                          description="暂无图片预览"
                        ></el-empty>
                        <div v-else class="demo-image__preview">
                          <el-image
                            fit="contain"
                            :src="project[3].othersImg"
                            alt=""
                          ></el-image>
                          <!-- :preview-src-list="familyDescription.othersImg" -->
                        </div>
                      </td>
                      <td id="fq" class="jtqk_td">
                        <el-empty
                          v-if="!project[3]"
                          :image-size="50"
                          description="暂无情况说明"
                        ></el-empty>
                        <div v-else>
                          <span>{{ project[3].othersText }}</span>
                          <el-popover
                            placement="top"
                            width="800"
                            trigger="click"
                            :content="project[3].othersText"
                          >
                            <el-button slot="reference" type="text"
                              >查看全部</el-button
                            >
                          </el-popover>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </el-collapse-item>
          <!-- 情况结束 -->
        </el-collapse>
      </div>
    </div>

    <!-- 内容结束 -->
    <!-- 按钮开始 -->
    <div class="five_box xwzx_box" style="display: block">
      <hover-light-button
        :buttonname="buttonname1"
        @click.native="routerTo('/pay')"
      />
    </div>
    <!-- 按钮结束 -->
  </div>
</template>

<script>
// 引入自定义按钮
import HoverLightButton from "components/common/button/HoverLightButton.vue";
// 引入学习成绩模块
import StudentScore from "./StudentScore.vue";
// 引入学生荣誉按钮
import StudentAward from "./StudentAwrad.vue";
export default {
  name: "StudentDetail",
  props: {
    project: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      buttonname1: "立即资助",
      studentInfo: {},
      familyDescription: {
        othersImg: require("assets/image/charity/personDonation/carousel/carousel2.png"), //[
        //   require("assets/image/charity/personDonation/carousel/carousel2.png"),
        //   require("assets/image/charity/personDonation/carousel/carousel2.png"),
        //   require("assets/image/charity/personDonation/carousel/carousel4.png")
        // ],
        othersText:
          "Lorem ipsum dolor sit amet consectetur adipisicing elit.Molestiae amet illo aliquid, error sunt quasi quaerattenetur suscipit vero accusamus repudiandae, minus officianon, at nobis dicta necessitatibus atque Lorem ipsum dolosit amet consectetur adipisicing elit. Ipsum saepe sed quiaest natus pariatur architecto dolor fugiat magni accusamusipsam, deleniti dolorem provident, delectus alias vel totamquaerat dignissimos Lorem ipsum dolor sit amet consecteturadipisicing elit. Quaerat ad expedita tenetur asperioresvoluptatibus, repellat odit consectetur aliquam? Quasaperiam sint unde soluta repudiandae est dolor auperspiciatis porro officiis."
      }
    };
  },

  components: {
    HoverLightButton,
    StudentScore,
    StudentAward
  },

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    // 携带参数跳转到支付页面
    routerTo(path) {
      const { href } = this.$router.resolve({
        path: path,
        query: {
          recipientId: this.project[1].recipientId
        }
      });
      window.open(href, "_blank");
    }
  },
  created() {},
  watch: {
    project() {
      if (this.project[3]) {
        this.familyDescription = this.project[3];
      }
      if (this.project[4]) {
        // console.log(this.project[4]);
      }
    }
  }
};
</script>
<style scoped lang="scss">
.box {
  width: 52vw;
  border: 1px #cdcec0 dashed;
  padding: 5px 0px;
  overflow: hidden;
  margin-top: 10px;
}
.collapse_box {
  width: 86%;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 50px;
  padding: 20px;
  border: 2px solid rgb(241, 163, 111);
  background-color: rgb(240, 212, 186);
}

.top_title {
  width: 100%;
  text-align: center;
  height: 33px;
  line-height: 33px;
  font-size: 0px;
  color: #fff;
  background: #f1f1f1;
  border-radius: 5px;
  font-weight: bold;
}
div {
  box-sizing: border-box;
}
.top_title span {
  color: black;
  font-size: 14px;
}
.content_box {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  line-height: 25px;
  padding-bottom: 55px;
}
.one_box {
  width: 52vw;
  border: 1px #cdcec0 dashed;
  font-size: 0px;
  padding: 5px 0px;
  overflow: hidden;
}
.one_row {
  height: 62px;
  padding: 5px 10px;
  box-sizing: content-box;
  text-align: center;
}
.c_row {
  display: inline-block;
  width: 23vw;
  vertical-align: top;
  height: 100%;
  box-sizing: content-box;
}
.left_box {
  background: #fc9f37;
  width: 6vw;
  box-sizing: content-box;
  margin-right: 10px;
}
.left_box,
.right_box {
  height: 100%;
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  text-align: center;
  line-height: 62px;
}
.right_box {
  background: #fee7cd;
  width: 15vw;
  text-align: left;
  padding: 0px 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
div {
  box-sizing: border-box;
}
.jiating_title {
  background: url("../../../../../assets/image/charity/personDonation/hopeStart/familyIntr.png")
    no-repeat;
  height: 130px;
  line-height: 130px;
  background-position: 50%;
  width: 90%;
  background-size: 100%;
  margin: 0 auto;
}
.jiating_title h3 {
  padding-top: 14px;
  padding-left: 60px;
  font-weight: bold;
}
.jtbigtable {
  width: 90%;
  line-height: 26px;
  border: 1px #cdcec0 solid;
  border-collapse: separate;
  border-spacing: 0px;
  margin: 0 auto;
}
.jtbigtable td {
  height: 40px;
}
.jtjusetd {
  background-color: #fc9f37;
  width: 20vw;
  border: 1px #fff solid;
  text-align: center;
  color: #484848;
}
.jtqk_td {
  border-bottom: 1px #cdcec0 solid;
  text-align: left;
  text-indent: 28px;
  span {
    line-height: 1.5em;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    -webkit-box-orient: vertical;
  }
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
.biaoxian_title {
  background: url("../../../../../assets/image/charity/personDonation/hopeStart/recommender.png")
    no-repeat;
  height: 130px;
  line-height: 130px;
  background-position: 50%;
  width: 90%;
  background-size: 100%;
  margin: 0 auto;
}
.biaoxian_title h3 {
  padding-top: 14px;
  padding-left: 60px;
  font-weight: bold;
}
.jtlvsetd {
  background-color: #c2cc0f;
  width: 130px;
  border: 1px #fff solid;
}
.boo {
  border-bottom: 1px #cdcec0 solid;
  text-align: left;
  padding-left: 10px;
  color: #909090;
}
.boo2 {
  text-align: left;
  padding-left: 10px;
  color: #909090;
}
.five_box {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  padding-top: 20px;
}
.el-collapse-item__header {
  font-size: 20px;
}
</style>
